import React from "react";
import { Card, Form, Input, InputNumber, Select } from "antd";
import EditableTableField from "./EditableTableField";

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 }
  }
};

const MailConfig = ({ form }) => {
  // console.log("111");
  const { getFieldDecorator } = form;
  return (
    <Card title="渠道配置" style={{ marginTop: 16, marginBottom: 48 }}>
      <Form {...formItemLayout} onSubmit={() => {}} style={{ width: 800 }}>
        <Form.Item label="邮件用户名">
          {getFieldDecorator("sendName", {
            rules: [
              {
                required: true,
                message: "请输入邮件用户名!"
              }
            ]
          })(<Input style={{ width: 466 }} />)}
        </Form.Item>
        <Form.Item label="邮件密码/授权码">
          {getFieldDecorator("passWord", {
            rules: [
              {
                required: true,
                message: "请输入邮件密码/授权码!"
              }
            ]
          })(<Input.Password style={{ width: 466 }} />)}
        </Form.Item>
        <Form.Item label="邮箱服务器地址">
          {getFieldDecorator("mailHost", {
            rules: [
              {
                required: true,
                message: "请输入邮箱服务器地址!"
              }
            ]
          })(<Input style={{ width: 466 }} />)}
        </Form.Item>
        <Form.Item label="邮件端口">
          {getFieldDecorator("mailPort", {
            rules: [
              {
                required: true,
                message: "请输入邮件端口!"
              }
            ]
          })(<InputNumber style={{ width: 466 }} max={65535} min={1} />)}
        </Form.Item>
        <Form.Item label="协议">
          {getFieldDecorator("mailAgreement", {
            rules: [
              {
                required: true,
                message: "请选择邮件协议!"
              }
            ]
          })(
            <Select style={{ width: 466 }}>
              {[
                { key: 1, value: "SMTP" },
                { key: 2, value: "POP3" },
                { key: 3, value: "IMAP" }
              ].map(item => (
                <Select.Option key={item.key}>{item.value}</Select.Option>
              ))}
            </Select>
          )}
        </Form.Item>
        <Form.Item label="配置属性">
          {getFieldDecorator("emailParams")(<EditableTableField />)}
        </Form.Item>
      </Form>
    </Card>
  );
};

export default MailConfig;
